<script setup>
import { computed } from 'vue'

// props 接收父传子数据
const props = defineProps({
  list: Array,
})

// 计算
const leftCount = computed(() => {
  // 计算出未完成的数量
  return props.list.filter(v => !v.done).length
})
</script>

<template>
  <footer class="footer">
    <span class="todo-count">
      <strong>{{ leftCount }}</strong> item left
    </span>
    <ul class="filters">
      <li>
        <a class="selected" href="#/">All</a>
      </li>
      <li>
        <a href="#/active">Active</a>
      </li>
      <li>
        <a href="#/completed">Completed</a>
      </li>
    </ul>
    <button class="clear-completed">Clear completed</button>
  </footer>
</template>

<style lang="less" scoped></style>
